<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<svg class="hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<line class="line-one" x1="25" y1="42" x2="75" y2="42" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
<line class="line-two" x1="25" y1="50" x2="75" y2="50" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
<line class="line-three" x1="25" y1="58" x2="75" y2="58" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script>
const hamburger = document.querySelector('.hamburger');
const lineOne = hamburger.querySelector('.line-one');
const linetwo = hamburger.querySelector('.line-two');
const linethree = hamburger.querySelector('.line-three');
const lines = [lineOne, linetwo, linethree];
const tl = new TimelineMax({})
const toggleMenu = new TimelineMax({paused:true, reversed:true});
toggleMenu
.to(linetwo, .125, {scaleX: 0})
.to(lineOne, .250, {svgOrigin: "50 50", y: 6, rotation: 45, ease: Power4.easeIn}, "cross")
.to(linethree, .250, {svgOrigin: "50 50", y: -6, rotation: -45, ease: Power4.easeIn}, "cross");
hamburger.addEventListener('click', _ => {
hamburger.classList.toggle('js-x');
toggleMenu.reversed() ? toggleMenu.play() : toggleMenu.reverse();
})
hamburger.addEventListener('mouseenter', _ => {
if(hamburger.classList.contains('js-x')) {
return;
}
tl.staggerTo(lines, .25, {scaleX: 1.5, yoyo:true, repeat: 1, ease: Power1.easeIn}, .125 )
})
</script>
body {
display: grid;
height: 100vh;
}
.hamburger {
margin: auto;
max-width: 50vh;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hamburger:hover .line-one,
.hamburger:hover .line-two,
.hamburger:hover .line-three {
-webkit-animation: line-grow ease-out 500ms;
animation: line-grow ease-out 500ms;
}
.hamburger:hover .line-two {
-webkit-animation-delay: 50ms;
animation-delay: 50ms;
}
.hamburger:hover .line-three {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
